<template>
	<image src="/static/sqk.png" class="banner" mode=""></image>
	<view class="box">
		<image src="/static/couponbg.png" class="pic" mode=""></image>
		<view class="content">
			<text class="title">{{data.infoName}}</text>
			<view class="list">
				<view class="item" v-for="(item,index) in data.list" :key="index">
					<text class="name slh">{{item[0].couponName}}</text>
					<text class="num">{{item[0].preAmount/100}}*{{item.length}}张</text>
				</view>
			</view>
		</view>
	</view>
	<view class="footer-fix">
		<view class="content">
			<view class="price">
				<text class="amount">{{data.price / 100}}元</text>
				<text class="unamount">原价({{data.originPrice / 100}}元)</text>
			</view>
			<button class="btn" @click="submit">立即购买</button>
		</view>
	</view>
</template>

<script setup>
	import {
		suitInfo,
		preSuit
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow,

	} from '@dcloudio/uni-app'
	import {
		wxOpenid,
		sendCreateOrder,
		debounce
	} from '@/utils/login-sdk.js'
	import {
		ref
	} from 'vue';
	const data = ref()
	onLoad(() => {
		getDatga()
	})

	/** 获取数据 */
	const getDatga = async () => {
		const res = await suitInfo()
		// let acc = {}

		
		const groupedCoupons = res.result.couponList.reduce((acc, coupon) => {
			// 如果acc中还没有这个id的分组，就创建一个新的数组
			console.log(acc)
			if (!acc[coupon.id]) {
				acc[coupon.id] = [];
			}
			// 将当前优惠券添加到对应的id分组中
			acc[coupon.id].push(coupon);
			return acc;
		}, {});
		
		const groupedCouponsArray = Object.values(groupedCoupons);
		
		res.result.list = groupedCouponsArray
		data.value = res.result
	}

	const submit = debounce((async()=>{
		uni.showLoading({
			mask:true,
		})
		const {memberId,openId} = await wxOpenid()
		const res = await preSuit({memberId:memberId,suitActivityId:data.value.id})
		console.log(res.result)
		const orderParams = {
			preOrderId: res.result.preOrderId,
			orderAmount: data.value.price,
			payAmount: data.value.price,
			couponIds: "",
			memberId: memberId,
			activityReduction: 0,
			openId: openId,
			storeId: '',
			businessType: "5"
		}
		sendCreateOrder(orderParams,res.result.token)
		
	}),2000)


</script>

<style lang="scss">
	page {
		background: #F8F5F0;
	}

	.banner {
		width: 702rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 25rpx auto;
		display: block;
	}

	.box {
		width: 702rpx;
		height: 713rpx;
		margin: 0 auto;
		position: relative;

		.pic {
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 36rpx;
			width: 702rpx;
			height: 713rpx;
		}

		.content {
			position: absolute;
			top: 0;
			left: 0;
			width: 702rpx;
			height: 713rpx;

			.title {
				font-weight: 900;
				font-size: 43rpx;
				color: #FFF5F6;
				display: block;
				text-align: center;
				margin-top: 62rpx;
				margin-bottom: 45rpx;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 52rpx;
				overflow-y: scroll;
				height: 490rpx;

				.item {
					width: 291rpx;
					height: 153rpx;
					background: #FFFAF3;
					border-radius: 13rpx;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.name {
						color: #522D00;
						font-size: 30rpx;
						font-weight: bold;
						width: 150rpx;
					}

					.num {
						color: #E6A24E;
						font-size: 30rpx;
						display: block;
						// margin-top: 10rpx;
					}
				}
			}
		}
	}

	.footer-fix {
		width: 748rpx;
		height: 166rpx;

		.content {
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			display: flex;
			justify-content: space-between;

			.price {
				margin-left: 30rpx;
				margin-top: 30rpx;

				.amount {
					color: #FE9C26;
					font-weight: bold;
					display: block;
					font-size: 34rpx;
				}

				.unamount {
					color: #A8A8A8;
					font-size: 28rpx;
					display: block;
					text-decoration: line-through;
				}
			}

			.btn {
				width: 210rpx;
				height: 70rpx;
				background: #FE9C26;
				border-radius: 35rpx;
				font-size: 28rpx;
				color: #FFFBF6;
				line-height: 70rpx;
				margin-top: 30rpx;
				margin-right: 30rpx;
			}
		}


	}
</style>